<template>
  <div>
    <HelloWorld :message="message" @changeMessage="changeMessage"/>
    <van-button type="success" @click="say">1231231</van-button>
    <hr>
    <my-button type="success" @click="say">你好呀</my-button>
    <my-button type="primary" @click="say">你好呀</my-button>
    <my-button type="" @click="say">你好呀</my-button>
  </div>
</template>

<!-- 默认插槽   <my-app> 内容 </my-app>   => <slot></slot> -->
<!-- 具名插槽   <my-app> <template #abc></template> </my-app>   => <slot name="abc"></slot> --> 
<!-- 作用域插槽 <my-app> <template #abc="scope"></template> </my-app>   => <slot name="abc" :count="count"></slot>   所有的属性会传递给scope-->

<script setup>
import HelloWorld from '@/components/HelloWorld.vue';
import MyButton from './components/MyButton.vue';
import { ref } from 'vue';

// 组件通信： 父子通信 自定义属性  子父通信： 自定义事件

const message = ref('你好呀！！');
const changeMessage = (value) => {
  message.value = value
}

const say = () => {
  console.log(1111)
}

</script>